<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/line/src/line.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/line/src/line.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div>&lt;/div>
&lt;/template>

&lt;script>
/**
 * 线条覆盖物组件
 * @module xdh-map-line
 *
 */
import LineString from 'ol/geom/LineString'
import Point from 'ol/geom/Point'
import { featureStyleRender, mixProps } from 'utils/util'
import FeatureMixin from 'utils/mixins/feature'
import BaseMixin from 'utils/mixins/base'
import StrokeMixin from 'utils/mixins/stroke'
import TextMixin from 'utils/mixins/text'
import CleanMixin from 'utils/mixins/clean'
import { parse } from 'utils/style'
import { convertToWgs84 } from 'utils/convert'
const defaultArrow = require('sources/arrows/black.png')

/**
 * 参数属性
 * @member props
 * @property {array[]} routes 点经纬度坐标，是一个维数组
 * @property {string | boolean} [arrow] 箭头图片url，true为采用默认的黑色箭头，false不要箭头
 * @property {number[]} [arrowAnchor] 箭头位置偏移
 * @property {boolean} [arrowEach] 是否每段线条都加箭头
 * @property {number} [zIndex] 渲染层级
 * @property {string} [cursor] 鼠标经过时形状
 * @property {number} [strokeWidth] 边框厚度
 * @property {string} [strokeColor] 边框颜色
 * @property {string} [strokeLineCap] 虚线样式
 * @property {string} [strokeLineJoin] 虚线样式
 * @property {number[]} [strokeLineDash] 虚线样式
 * @property {number} [strokeLineDashOffset]
 * @property {number} [strokeMiterLimit]
 * @property {string} [text] 文本内容
 * @property {string} [color] 文本颜色
 * @property {string} [font] 字体大小，如 20px
 * @property {string} [background] 字体背景颜色
 */
const vueProps = {
  // 坐标数组
  routes: {
    type: Array,
    default() {
      return []
    }
  },
  // 箭头图片url
  arrow: {
    type: [String, Boolean],
    default: false
  },
  // 箭头位置偏移
  arrowAnchor: {
    type: Array,
    default() {
      return [0.75, 0.5]
    }
  },
  // 每段线条都加箭头
  arrowEach: {
    type: Boolean
  }
}

const props = mixProps({ props: vueProps }, BaseMixin, StrokeMixin, TextMixin)

// 线条形不需要 position 参数
delete props.position

export default {
  name: 'XdhMapLine',
  mixins: [FeatureMixin, BaseMixin, StrokeMixin, TextMixin, CleanMixin],
  props: props,
  watch: {
    routes() {
      this.update()
    }
  },
  methods: {
    arrowStyle(start, end) {
      const dx = end[0] - start[0]
      const dy = end[1] - start[1]
      const rotation = Math.atan2(dy, dx)
      return parse({
        className: 'Style',
        geometry: new Point(end),
        image: {
          className: 'Icon',
          src: this.arrow === true ? defaultArrow : this.arrow,
          anchor: this.arrowAnchor,
          rotateWithView: true,
          rotation: -rotation
        }
      })
    },
    lastSegment() {
      const length = this.routes.length
      if (length >= 2) {
        return this.arrowStyle(this.routes[length - 2], this.routes[length - 1])
      }
    },
    createStyle() {
      const feature = this.feature
      const geometry = feature.getGeometry()
      let styles = [featureStyleRender.call(this)]
      if (this.arrow) {
        if (this.arrowEach) {
          geometry.forEachSegment((start, end) => {
            styles.push(this.arrowStyle(start, end))
          })
        } else {
          styles.push(this.lastSegment())
        }
      }
      return styles
    },
    createGeometry() {
      return new LineString(
        this.routes.map(pos => {
          return convertToWgs84(
            this.coordType,
            pos.map(n => Number.parseFloat(n))
          )
        })
      )
    }
  }
}
&lt;/script>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li></ul><h3>Classes</h3><ul><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue May 21 2019 17:27:18 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
